<template>
	<view class="box">
		<view class="main">
			<view class="search">
				<u-search :showAction="false" actionText="搜索" :actionStyle="actionStyles" placeholder="搜索医院、科室、医生、疾病"
					v-model="keyword" :animation="false" :clearabled="true" :disabled="true" @click="goSearch"
					bgColor="#fff"></u-search>
			</view>
			<view class="brand">
				<view class="button_box">
					<view class="button_item" v-for="v in brand" :key="v.id" @click="brandSelected(v)">
						<view class="top_button" :class="{selected : v.title == TopBrand}">{{v.title}}({{v.number}})
						</view>
					</view>
				</view>
			</view>
			<my-nav></my-nav>
		</view>
		<view class="content" v-if="isSelectCity">
			<view class="card_day" v-if="noDataList">
				<view class="card_all" @click="allDay" :class="{mark_left : dayActive == ''}">
					全部
				</view>
				<scroll-view style="width: 79%;white-space: nowrap;" scroll-x="true">
					<view class="card_box">
						<!-- 	<view class="card_box_all">
							全部
						</view> -->
						<view class="card_box_list" v-for="(value,key) in showList" :key="key"
							v-if="value.type == TopBrand">
							<view class="card_box_list_item" v-for="(v,k) in value.data" :key="k"
								:class="{mark_left : dayActive == v.serviceDate}">
								<view class="card_content" @click="btnToList(v)">
									<view class="card_content_top" :class="{mark_left : dayActive == v.serviceDate}">
										{{v.week}}
									</view>
									<view class="card_content_center" :class="{mark_left : dayActive == v.serviceDate}">
										{{v.monthDay}}
									</view>
									<view class="card_content_bottom">

									</view>
								</view>
								<!-- <view class="mark_left" v-if="v.serviceDate == dayActive"></view> -->
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="card_status" v-if="noDataList">
				<view class="status_title">仅显示有号结果</view>
				<view>
					<u-switch space="2" v-model="status" @change="isHao" activeColor="#43C163"
						inactiveColor="rgb(230, 230, 230)">
					</u-switch>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapActions,
		mapState
	} from "vuex";
	import {
		searchNav,
		resultHos,
		resultDept,
		resultDocto
	} from '@/api/home/search.js'
	export default {
		props: {
			isSelectCity: {
				type: Boolean,
				required: false,
				default: true
			}
		},
		data() {
			return {
				keyword: '', //搜索词
				actionStyles: {
					'color': '#3c9cff'
				},
				TopBrand: '', //医院科室科室按钮
				loadTop: '', //页面参数，哪个按钮高亮
				status: false,
				dayList: [], //日期列表总列表(有号无号都有)
				showList: [], //当前要展示的列表时刻表
				showLists: [], //备用，暂时用不上
				dayActive: '' //当前激活的日期
			}
		},
		methods: {
			goSearch() { //去搜索
				uni.navigateBack({
					delta: 1
				});
			},
			async brandSelected(params) {
				//console.log(params, 'kkkkkk',this.TopBrand);
				// if (params.number < 1) {
				// 	uni.$u.toast(`${params.title}暂无信息`, 2000)
				// 	return
				// }
				// if (params.title == '科室') {
				// 	uni.$u.toast(`${params.title}暂未开放`, 2000)
				// 	return
				// }
				this.$store.state.doc.topSearchButton = params.id
				this.brand.map((v) => {
					if (this.topButton == v.id) {
						this.TopBrand = v.title
					}
				})
				if (params.id == 1) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					let res = await searchNav('hos')
					uni.hideLoading()
					this.$store.state.doc.selectGroup = res.data.selectGroup
					this.$store.state.doc.aiSortGroup = res.data.aiSortGroup
				}
				if (params.id == 2) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					let ress = await searchNav('dept')
					uni.hideLoading()
					//console.log('bbb')
					this.$store.state.doc.selectGroup = ress.data.selectGroup
					this.$store.state.doc.aiSortGroup = ress.data.aiSortGroup
				}
				if (params.id == 3) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					let resss = await searchNav('doctor')
					uni.hideLoading()
					//console.log('ccc')
					this.$store.state.doc.selectGroup = resss.data.selectGroup
					this.$store.state.doc.aiSortGroup = resss.data.aiSortGroup
				}
				this.allDay()
			},
			//点击日期
			async btnToList(params) {
				// if (!params.hasHao) {
				// 	uni.$u.toast('当日无预约信息')
				// 	return
				// }
				//console.log(params, 12333);
				let data = {} //有值就用值，没值空对象
				//日期，默认全部，这里传的是具体日期
				data.serviceDate = params.serviceDate
				this.$store.state.doc.serviceDate = params.serviceDate
				this.dayActive = params.serviceDate //传过来的日期
				await this.NODATA(data) //有号
				this.status = true //状态开关
				// this.$store.state.doc.hasHao = true

			},
			async allDay() { //全部
				this.dayActive = ''
				this.$store.state.doc.serviceDate = ''
				this.status = false //状态开关
				// this.$store.state.doc.hasHao = false
				let res = this.ADDHIS()
			},
			deepClone(obj) {
				let objClone = Array.isArray(obj) ? [] : {};
				if (obj && typeof obj === "object") {
					for (var key in obj) {
						if (obj.hasOwnProperty(key)) {
							//判断ojb子元素是否为对象，如果是，递归复制
							if (obj[key] && typeof obj[key] === "object") {
								objClone[key] = this.deepClone(obj[key]);
							} else {
								//如果不是，简单复制
								objClone[key] = obj[key];
							}
						}
					}
				}
				return objClone;
			},
			isHao(hasHao) {

				//console.log(hasHao,'dfsdfsdf');
				if (hasHao) {
					// let res = this.deepClone(this.dayList)
					// this.showList = res.map(v => {
					// 	v.data = v.data.filter(value => {
					// 		return value.hasHao == true
					// 	})
					// 	return v
					// })
					//this.$store.state.doc.hasHao = true
					let res = this.NODATA()
					//console.log(this.showList,this.dayList);
				} else {
					//this.$store.state.doc.hasHao = false
					let res = this.ADDHIS()
					this.showList = this.dayList
					//console.log( this.dayList,'dff');
				}
				//console.log('change', this.$store.state.doc.hasHao);
			},
			...mapMutations(['ADDHIS', 'NODATA']),
		},
		computed: {
			...mapState({
				searchWord: state => state.doc.keyWord,
				topButton: state => state.doc.topSearchButton,
				brand: state => state.doc.brand
			}),
			noDataList() {
				//return false
				let data = this.dayList.findIndex(v => {
					if (v.type == this.TopBrand) {
						return v?.data.length > 0
					}
				})
				//console.log(data);
				if (data !== -1) {
					return true
				} else {
					return false
				}

			}
		},
		watch: {
			TopBrand(ne, old) { //选择的不同按钮（医生，科室，医院），nav存的结果也要清空
				//console.log(ne);
				this.$store.state.doc.aiSortGroupResult = []
				this.$store.state.doc.selectGroupResult = []
			},
			status(ne) {
				this.$store.state.doc.resultToCity = ne
				//console.log(ne,'status');
			}
		},
		onShow() {
			this.dayActive = ''
		},
		mounted() {
			//let store = this.$store.state.doc.searchTopData
			//console.log(this.$store.state.doc.searchTopData);
			this.keyword = this.searchWord.value
			this.brand.map((v, k) => {
				if (this.topButton == v.id) {
					this.TopBrand = v.title //默认选中
				}
				//初始化日期列表
				this.$store.state.doc.searchTopData.map((value) => {
					if (value.type == 'hos' && v.title == '医院') {
						v.number = value.total
						if (value.total > 0) {
							this.dayList.push({
								'data': [...value.scheduleTitle],
								'type': '医院'
							})
						}
					}
					if (value.type == 'dept' && v.title == '科室') {
						v.number = value.total
						if (value.total > 0) {
							this.dayList.push({
								'data': [...value.scheduleTitle],
								'type': '科室'
							})
						}
					}
					if (value.type == 'doctor' && v.title == '医生') {
						v.number = value.total
						if (value.total > 0) {
							this.dayList.push({
								'data': [...value.scheduleTitle],
								'type': '医生'
							})
						}
					}
					this.showList = this.dayList
					//console.log(this.dayList, 'afghhhhh');
					return v
				})

			}) //默认搜索词
			if (this.isSelectCity) { //isSelectCity 默认全天(搜素结果页用),如果到城市页面,就会变成flase,allday就不执行
				this.allDay() //默认搜全天
			}
		},

	}
</script>

<style scoped lang="scss">
	.box {

		// overflow: hidden;
		.main {
			padding-bottom: 30rpx;
			box-sizing: border-box;
			background-color: #F5F6F8;
			//height: 100vh;
			//z-index: 10071;
			//position: relative;

			.search {
				padding-left: 22rpx;
				padding-top: 30rpx;
				padding-right: 24rpx;
			}

			.brand {
				.button_box {
					margin-top: 30rpx;
					display: flex;
					flex-direction: row;

					.button_item {
						margin-left: 20rpx;
						width: 200rpx;

						.top_button {
							text-align: center;
							color: #B3BCCC;
							background-color: #E5EAF7;
							border-radius: 30rpx;
							padding: 10rpx 10rpx;
						}

						.selected {
							color: #fff;
							background-color: #4581F6;
						}
					}

				}
			}
		}

		.content {
			box-sizing: border-box;
			background-color: #F5F6F8;

			.card_day {
				margin-left: 30rpx;
				display: flex;

				.card_all {
					flex-shrink: 0;
					flex-wrap: nowrap;
					//width: 54rpx;
					height: 110rpx;
					border-radius: 10rpx;
					background: white;
					font-size: 14px;
					font-weight: 400;
					color: #3D3D3D;
					//color: #4581F6;
					//box-sizing: border-box;
					//border: 1px solid #4581F6;
					line-height: 110rpx;
					padding-left: 20rpx;
					padding-right: 20rpx;
				}

				.mark_left {
					color: white;
					background-color: #4581F6;
					border: none
				}

				.card_box {
					display: flex;
					align-items: center;

					.card_box_list {
						margin-left: 8rpx;
						display: flex;

						.card_box_list_item {
							display: inline-block;
							position: relative;
							margin-left: 12rpx;
							width: 94rpx;
							height: 110rpx;
							background: #FFFFFF;
							border-radius: 10rpx;

							.card_content {
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								padding: 0 10rpx;

								.card_content_top {
									font-size: 20rpx;
									font-weight: 400;
									color: #3D3D3D;
									line-height: 14px;
									padding: 10rpx 0 12rpx 0;
								}

								.card_content_center {
									font-size: 28rpx;
									font-weight: 400;
									color: #3D3D3D;
									line-height: 40rpx;
									//padding-left:10rpx;
									//padding-right:10rpx;
									padding-bottom: 4rpx;
								}

								.card_content_bottom {
									padding-top: 8rpx;
									font-size: 16rpx;
									font-weight: 400;
									//color: #4581F6;
									line-height: 11px;
									text-align: center;
									width: 28px;
									height: 15px;
									//background: #EFF7FF;
									//border-radius: 3px;
								}
							}

							.mark_left {
								color: white !important;
								background-color: #4581F6;
							}

							// .mark_left {
							// 	position: absolute;
							// 	top: 0;
							// 	left: 0;
							// 	width: 22rpx;
							// 	height: 22rpx;
							// 	border-radius: 20rpx 0 80rpx 0;
							// 	background-color: #4581F6;
							// }
						}

						.mark_left {
							color: white !important;
							background-color: #4581F6;
						}
					}
				}
			}

			.card_status {
				padding-bottom: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 34rpx 32rpx 0 30rpx;

				.status_title {
					font-size: 12px;
					font-weight: 400;
					color: #3D3D3D;
					line-height: 17px;
				}
			}
		}
	}
</style>